<template>
  <el-dialog
    class="print-details-dialog"
    width="60%"
    append-to-body 
    title="收据单"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <div id="print" class="print-send" v-loading="loading">
      <div class="top">
        <!-- <div>{{ invoiceInfo.openTime }}</div> -->
        <!-- <div class="title">收据预览</div> -->
      </div>
      <header>收据单</header>
      <div class="info">
        <div>付款人:   {{ invoiceInfo.username }}</div>
      </div>
      <div class="info">
        <div>收费项目:   {{ invoiceInfo.project }}</div>
      </div>
      <div class="info">
        <div>收费金额:   {{ invoiceInfo.money }}</div>
      </div>
      <div class="info">
        <div>收款人:   {{ invoiceInfo.collectionUser }}</div>
      </div>
      <div class="info">
        <div>开票员:   {{ invoiceInfo.createUserName }}</div>
      </div>
      <div class="info">
        <div>收据开具时间:   {{ invoiceInfo.openTime }}</div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button ref="btn" type="primary" v-print="printConfig">打印</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { formatMoney } from "@/utils/index";

export default {
  name: "printDetails",
  data() {
    return {
      visible: false,
      invoiceInfo: {},
      infos: [],
      consult: {},
      store: {},
      orderAddress: {},
      loading: false,
      printConfig: {
        id: "#print"
      },
      pstTypeList: ['西药及中成药', '饮片', '颗粒', '打粉', '制丸', '膏方'],
    }
  },
  computed: {
    adderss() {
      if(this.orderAddress && this.orderAddress.username) {
        return `${ this.orderAddress.username } ${ this.orderAddress.phone } 
        ${ this.orderAddress.province }${ this.orderAddress.city }${ this.orderAddress.area }${ this.orderAddress.address }`;
      }
      return "";
    }
  },
  methods: {
    formatMoney,
    open(id) {
      this.visible = true;
      this.invoiceInfo = id;
    },
    onPrint() {
      if(this.$refs.btn) {
        this.$refs.btn.$el.click()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.print-send {
  border: 1px solid #000;
  margin: 0 auto;
  width: 684px !important;
  font-size: 14px;
  padding: 20px;

  .top {
    position: relative;

    .title {
      position: absolute;
      text-align: center;
      width: 100%;
      left: 0;
      top: 0;
    }
  }

  header {
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    padding: 10px;
  }

  .info {
    justify-content: space-between;
    padding-bottom: 5px;
    display: flex;

    div:last-child {
      padding-right: 50px;
    }
  }

  .list {
    border-bottom: 1px solid #000;
    margin-top: 10px;

    .lists {
      flex-wrap: wrap;
      display: flex;
    }

    .list-item,
    .list-item1 {
      justify-content: space-between;
      margin-left: 10px;
      padding: 5px 0;
      display: flex;
      width: 30%;

      .drug-name {
        font-weight: bold;
      }
    }

    .list-item1 {
      width: 48%;
    }

    .bottom {
      margin-top: 40px;
      margin-bottom: 5px;

      div {
        display: flex;
        padding-bottom: 2px;
        div {
          width: 50%;
        }
      }
    }
  }

  .list.list-0 {
    border-top: 1px solid #000;
  }

  .list.last-list {
    border-bottom: 0;
    
    .bottom {
      margin-top: 0;
    }
  }

  .tips {
    border-bottom: 1px solid #000;
    border-top: 1px solid #000;
    padding: 10px 0;
    font-size: 14px;
    display: flex;
  }

  .msg {
    justify-content: space-between;
    margin-top: 10px;
    display: flex;

    .msg-left {
      align-items: center;
      display: flex;

      img {
        height: 140px;
        width: 140px;
      }

      .text {
        padding-left: 5px;

        div {
          font-size: 20px;
        }
      }
    }
  }
}
</style>